<template>
<!--  会议内容最大的盒子-->
  <div class="content-all">
    <div class="content-all-one">
      <!--    头部最大的盒子-->
      <div class="head-all">
        <div class="head-one">会议内容</div>
      </div>
      <!--    下面的内容-->
      <div class="app">
        <div class="biga">
          <div>

          </div>

          <div class="leftAll">
                   <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">
                   <el-form-item class="all-head-one" label="主题：" prop="age">
                        <el-input style="height: 40px;width: 300px;line-height: 40px" v-model="numberValidateForm.theme"
                                  type="text" autocomplete="off"/>
                   </el-form-item>
                    <el-form-item class="all-head-one" label="发起人：" prop="age">
                         <el-input style="height: 40px;width: 300px;line-height: 40px" v-model.number="numberValidateForm.initiator" type="text" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item class="all-head-one" label="主讲人：" prop="age">
                        <el-input style="height: 40px;width: 300px;line-height: 40px" v-model.number="numberValidateForm.keynote" type="text" autocomplete="off"/>
                    </el-form-item>
                    <el-form-item class="all-head-one" label="参会人员：" prop="age">
                        <el-input style="height: 40px;width: 300px;line-height: 40px" v-model.number="numberValidateForm.oaConferee.stateName" type="text" autocomplete="off" v-if="numberValidateForm.oaConferee"/>
                    </el-form-item>

               </el-form>
          </div>
          <div class="rightAll">
                      <el-form-item class="all-head-one" label="记录人员：" prop="age">
                        <el-input style="height: 40px;width: 300px;line-height: 40px" v-model.number="numberValidateForm.record"
                            type="text"
                            autocomplete="off"
                        />
                      </el-form-item>
                      <el-form-item class="all-head-one" label="开始时间：" prop="age">
                        <el-input
                            style="height: 40px;width: 300px;line-height: 40px"
                            v-model.number="numberValidateForm.startTime"
                            type="text"
                            autocomplete="off"
                        />
                      </el-form-item>
                      <el-form-item class="all-head-one" label="结束时间：" prop="age">
                        <el-input
                            style="height: 40px;width: 300px;line-height: 40px"
                            v-model.number="numberValidateForm.finishTime"
                            type="text"
                            autocomplete="off"
                        />
                      </el-form-item>
                      <el-form-item class="all-head-one" label="未到情况：" prop="age">
                        <el-input
                            style="height: 40px;width: 300px;line-height: 40px"
                            v-model.number="numberValidateForm.noStaff"
                            type="text"
                            autocomplete="off"
                        />
                      </el-form-item>
          </div>
        </div>
        <div>
          <div class="demo-collapse">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="会议内容：" name="1">
                <div>
                  {{numberValidateForm.meetingContent}}
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>

      </div>



    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeMount, reactive, ref} from 'vue'

import type { FormInstance } from 'element-plus'
import axios from "axios";


// 表单数据模型
const numberValidateForm = ref({
  contentMeetingId:'',
  theme:'',
  initiator:'',
  keynote:'',
  confereeId:'',
  stateName:'',
  record:'',
  startTime:'',
  finishTime:'',
  noStaff:'',
  meetingContent:'',
})


// 折叠面板
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}

const test = ref("")

// 生命周期
onBeforeMount(function (){
  axios.get("http://localhost:1688/contentMeeting/selectMeeting").then((res)=>{
    console.log(res)
    numberValidateForm.value= res.data.data[0]
    console.log(numberValidateForm)

  })
})


</script>

<style>
/*全局*/
*{
  margin: 0px;
  padding: 0px;
}
/*会议内容最大的一个页面*/
.content-all{
  width: 100%;
  height: 100%;
}
/*包含俩个大盒子的div*/
.content-all-one{

}
/*第一个盒子*/
.head-all{
  display: flex;
  justify-content: center;
}
/*上面的大盒子*/
.head-one{
  background-color: white;
  width: 90%;
  height: 100px;
  text-align: center;
  font-size: 30px;
  line-height: 100px;
  border-radius: 20px;
  color: darkturquoise;
}
.app{
}
 /*下面俩个盒子的大盒子*/
  .biga{
    width: 90%;
    background-color: white;
    margin:10px 70px 0px 70px;
    border-radius: 20px;
    display: flex;
  }
  /*折叠面板*/
  .demo-collapse{
    width: 90%;
    margin-left: 70px;
    margin-top: 10px;
  }
  .leftAll{
    width: 500px;
    display: flex;
    margin-left: 40px;
  }

  .rightAll{
    width: 500px;
    margin-left: 70px;
  }

</style>